<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0">

    <script src="./lib/vue.js"></script>
    <!-- <script src="./lib/vue.min.js"></script> -->
    <link rel="stylesheet"
        href="./lib/vant@2.12.54_lib_index.css">
    <link rel="stylesheet"
        href="./styles/vant.css" />
    <script src="./lib/vant@2.12.54_lib_vant.min.js"></script>
    <script src="./lib/axios-0.18.0.js"></script>
    <script src="./http/request.js"></script>
    <script src="./shopList/shopList.js"></script>
    <title>代跑跑</title>
    <style>
        .main {
            overflow: scroll;
            height: 85vh;
        }

        .van-tabbar-item__icon {
            font-size: 30px;
        }

        .my-swipe .van-swipe-item {
            color: #fff;
            font-size: 20px;
            text-align: center;
        }

        .my-swipe .van-swipe-item img {
            width: 100%;
            height: 21vh;
        }

        .filter {
            width: 44px;
            height: 44px;
            line-height: 44px;
            text-align: center;
        }

        .orderItem {
            margin: 16px 0;
            position: relative;
            width: 100%;
            height: 25%;
            border-radius: 8px;
            background-color: #fff;
        }

        .van-cell-group {
            background-color: var(--van-doc-background);
        }

        .order-tag {
            display: flex;
            padding: 8px 10px;
            justify-content: space-between;
        }

        .tag-left {
            display: flex;
            align-items: center;
        }

        .tag-right {
            display: flex;
            align-items: center;
            color: var(--van-warnning);
        }

        .van-divider {
            margin: 0 15px;
            border-color: #cccccc91;
        }

        .order-info {
            display: flex;
            width: 100%;
            padding: 12px 12px;
            font-size: 16px;
        }

        .order-info .left {
            font-size: 14px;
        }

        .order-info .right {
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            max-width: 46vw;
        }

        .order-info .right .top {
            padding: 0.64vh 0 0 5vw;
            font-size: 14px;
            font-weight: 600;
            color: var(--van-tabbar-item-text-color);
        }

        .order-info .right .top p {
            margin-bottom: 1vh;
        }

        .order-info .right .top .name {
            font-size: 20px;
            color: #000;
        }

        .order-info .right .van-button--small {
            font-size: 16px;
            width: 150px;
        }

        .waiting {
            color: #fff;
            background-color: var(--van-primary);
            border: 1px solid var(--van-primary);
            margin-left: 6vw;
        }

        .doing {
            background-color: #fff;
            color: var(--van-warnning);
            border: 1px solid var(--van-warnning);
        }

        .taken {
            background-color: #fff;
            color: var(--van-success);
            border: 1px solid var(--van-success);
        }

        .done {
            background-color: #fff;
            color: var(--van-done);
            border: 1px solid var(--van-done);
        }

        .cannel {
            background-color: #fff;
            color: var(--van-danger);
            border: 1px solid var(--van-danger);
        }

        .order-confirm {
            display: flex;
            flex-direction: column;
            width: 100%;
            height: 100%;
            padding: 35px;
        }

        .order-confirm .order-confirm-info {
            margin: 5px 0;
        }

        .order-confirm .order-confirm-info .van-icon {
            color: var(--van-primary);
        }

        .order-confirm .confirm-btn {
            display: flex;
            justify-content: center;
            font-size: 16px;
        }

        .van-dialog__confirm,
        .van-dialog__confirm:active {
            color: var(--van-primary);
        }

        .cuePopup.van-popup {
            background-color: transparent;
        }

        .van-popup__close-icon {
            color: #000;
        }

        .van-popup__close-icon--top-right {
            top: 8px;
            right: 8px;
        }
    </style>
</head>

<body>
    <div id="app">
        <!-- 标题栏 -->
        <van-nav-bar title="商家"></van-nav-bar>
        <div class="main">
            <!-- 下拉刷新 -->
            <van-pull-refresh v-model="isLoading"
                @refresh="onRefresh">

                <van-cell-group inset>
                    <!-- 轮播图部分 -->
                    <van-swipe class="my-swipe"
                        :autoplay="3000"
                        :show-indicators="false">
                        <van-swipe-item>
                            <img src="./img/shopSwipe1.png"
                                alt="">
                        </van-swipe-item>
                        <van-swipe-item>
                            <img src="./img/shopSwipe2.jpg"
                                alt="">
                        </van-swipe-item>
                        <van-swipe-item>
                            <img src="./img/shopSwipe3.jpg"
                                alt="">
                        </van-swipe-item>
                        <van-swipe-item>
                            <img src="./img/shopSwipe4.jpg"
                                alt="">
                        </van-swipe-item>
                        <van-swipe-item>
                            <img src="./img/information1.png"
                                alt="">
                        </van-swipe-item>
                    </van-swipe>

                    <!-- 分类标签页 -->
                    <van-tabs v-model="tab"
                        swipeable
                        animated
                        sticky>


                        <!-- 东浴一层 -->
                        <van-tab title="东浴一层"
                            name="东浴一层">

                            <div class="orderItem"
                                v-for="(item,index) in shopList.eastBathFirstFloor"
                                :key="item.shopId">
                                <div class="order-info">

                                    <van-image width="45%"
                                        :src="item.shopMm"
                                        radius="5px"
                                        @click="xinxiConfirm(item)"></van-image>

                                    <div class="right">
                                        <div class="top"
                                            @click="xinxiConfirm(item)">
                                            <p class="name">{{item.shopName}}</p>
                                            <p class="phone-tag">电话:{{item.shopPhone}}</p>
                                            <p>点击查看菜单</p>
                                        </div>
                                        <van-button round
                                            class="waiting statusBtn"
                                            size="small"
                                            @click="showDetail(item)">
                                            微信二维码
                                        </van-button>
                                    </div>
                                </div>
                            </div>
                        </van-tab>

                        <!-- 东浴二层 -->
                        <van-tab title="东浴二层"
                            name="东浴二层">
                            <div class="orderItem"
                                v-for="(item,index) in shopList.eastBathSecondFloor"
                                :key="item.shopId">
                                <div class="order-info">

                                    <van-image width="45%"
                                        :src="item.shopMm"
                                        radius="5px"
                                        @click="xinxiConfirm(item)"></van-image>

                                    <div class="right">
                                        <div class="top"
                                            @click="xinxiConfirm(item)">
                                            <p class="name">{{item.shopName}}</p>
                                            <p class="phone-tag">电话:{{item.shopPhone}}</p>
                                            <p>点击查看菜单</p>
                                        </div>
                                        <van-button round
                                            class="waiting statusBtn"
                                            size="small"
                                            @click="showDetail(item)">
                                            微信二维码
                                        </van-button>
                                    </div>
                                </div>
                            </div>
                        </van-tab>

                        <!-- 东浴三层 -->
                        <van-tab title="东浴三层"
                            name="东浴三层">
                            <div class="orderItem"
                                v-for="(item,index) in shopList.eastBathThirdFloor"
                                :key="item.shopId">
                                <div class="order-info">

                                    <van-image width="45%"
                                        :src="item.shopMm"
                                        radius="5px"
                                        @click="xinxiConfirm1(item)"></van-image>

                                    <div class="right">
                                        <div class="top"
                                            @click="xinxiConfirm1(item)">
                                            <p class="name">{{item.shopName}}</p>
                                            <p class="phone-tag">电话:{{item.shopPhone}}</p>
                                            <p>点击查看菜单</p>
                                        </div>
                                        <van-button round
                                            class="waiting statusBtn"
                                            size="small"
                                            @click="showDetail(item)">
                                            微信二维码
                                        </van-button>
                                    </div>
                                </div>
                            </div>
                        </van-tab>

                        <!-- 东服一层 -->
                        <van-tab title="东服一层"
                            name="东服一层">
                            <div class="orderItem"
                                v-for="(item,index) in shopList.eastServiceFirstFloor"
                                :key="item.shopId">
                                <div class="order-info">

                                    <van-image width="45%"
                                        :src="item.shopMm"
                                        radius="5px"
                                        @click="xinxiConfirm(item)"></van-image>

                                    <div class="right">
                                        <div class="top"
                                            @click="xinxiConfirm(item)">
                                            <p class="name">{{item.shopName}}</p>
                                            <p class="phone-tag">电话:{{item.shopPhone}}</p>
                                            <p>点击查看菜单</p>
                                        </div>
                                        <van-button round
                                            class="waiting statusBtn"
                                            size="small"
                                            @click="showDetail(item)">
                                            微信二维码
                                        </van-button>
                                    </div>
                                </div>
                            </div>
                        </van-tab>

                        <!-- 东服三层 -->
                        <van-tab title="东服三层"
                            name="东服三层">
                            <div class="orderItem"
                                v-for="(item,index) in shopList.eastServiceThirdFloor"
                                :key="item.shopId">
                                <div class="order-info">

                                    <van-image width="45%"
                                        :src="item.shopMm"
                                        radius="5px"
                                        @click="xinxiConfirm(item)"></van-image>

                                    <div class="right">
                                        <div class="top"
                                            @click="xinxiConfirm(item)">
                                            <p class="name">{{item.shopName}}</p>
                                            <p class="phone-tag">电话:{{item.shopPhone}}</p>
                                            <p>点击查看菜单</p>
                                        </div>
                                        <van-button round
                                            class="waiting statusBtn"
                                            size="small"
                                            @click="showDetail(item)">
                                            微信二维码
                                        </van-button>
                                    </div>
                                </div>
                            </div>
                        </van-tab>

                        <!-- <van-tab title="西浴一层"
                            name="西浴一层">
                            <van-empty description="敬请期待"></van-empty>
                        </van-tab>

                        <van-tab title="西浴二层"
                            name="西浴二层">
                            <van-empty description="敬请期待"></van-empty>
                        </van-tab> -->

                        <!-- 西服一层 -->
                        <van-tab title="西服一层"
                            name="西服一层">
                            <div class="orderItem"
                                v-for="(item,index) in shopList.westServiceFirstFloor"
                                :key="item.shopId">
                                <div class="order-info">

                                    <van-image width="45%"
                                        :src="item.shopMm"
                                        radius="5px"
                                        @click="xinxiConfirm(item)"></van-image>

                                    <div class="right">
                                        <div class="top"
                                            @click="xinxiConfirm(item)">
                                            <p class="name">{{item.shopName}}</p>
                                            <p class="phone-tag">电话:{{item.shopPhone}}</p>
                                            <p>点击查看菜单</p>
                                        </div>
                                        <van-button round
                                            class="waiting statusBtn"
                                            size="small"
                                            @click="showDetail(item)">
                                            微信二维码
                                        </van-button>
                                    </div>
                                </div>
                            </div>
                        </van-tab>

                        <!-- 西服二层 -->
                        <!-- <van-tab title="西服二层"
                            name="西服二层">
                            <van-empty description="敬请期待"></van-empty>
                        </van-tab> -->

                    </van-tabs>

                </van-cell-group>
            </van-pull-refresh>
        </div>

        <!-- 点击信息 -->
        <van-popup v-model="showConfirmPopup1"
            closeable
            position="bottom"
            :style="{ height: '50%' }"
            class="dianjixinxi">
            <div class="order-confirm">
                <div class="order-confirm-info"><van-icon
                        name="flower-o"></van-icon>&nbsp;联系方式:{{this.confirmDeliveryInfo.shopPhone}}</div>
                <div class="order-confirm-info"><van-icon
                        name="flower-o"></van-icon>&nbsp;是否支持外送:{{this.confirmDeliveryInfo.waisong}}</div>
                <div class="order-confirm-info"><van-icon
                        name="flower-o"></van-icon>&nbsp;营业时间:{{this.confirmDeliveryInfo.shoptime}}</div>
                <div class="order-confirm-info"><van-icon name="flower-o"></van-icon>&nbsp;菜单:</div>
                <div class="order-confirm-info"
                    v-for="(item,index) in this.confirmDeliveryInfo.tupian"
                    @click="onclick">&nbsp;&nbsp;&nbsp;&nbsp;<img :src="t[index]"
                        alt=""
                        style="height: 30vw;width: 30vw;">
                </div>
            </div>
        </van-popup>

        <van-popup v-model="showConfirmPopup2"
            closeable
            position="bottom"
            :style="{ height: '50%' }"
            class="dianjixinxi">
            <div class="order-confirm">
                <div class="order-confirm-info"><van-icon
                        name="flower-o"></van-icon>&nbsp;联系方式:{{this.confirmDeliveryInfo.shopPhone}}</div>
                <div class="order-confirm-info"><van-icon
                        name="flower-o"></van-icon>&nbsp;营业时间:{{this.confirmDeliveryInfo.shoptime}}</div>
                <div class="order-confirm-info"><van-icon name="flower-o"></van-icon>&nbsp;菜单:</div>
                <div class="order-confirm-info"
                    v-for="(item,index) in this.confirmDeliveryInfo.tupian"
                    @click="onclick">&nbsp;&nbsp;&nbsp;&nbsp;<img :src="t[index]"
                        alt=""
                        style="height: 30vw;width: 30vw;">
                </div>
            </div>
        </van-popup>

        <!-- 商家二维码弹出层 -->
        <van-popup v-model="isShowShopQR"
            class="cuePopup">
            <van-image width="55vw"
                :src="this.shopItemImg"></van-image>
        </van-popup>

        <!-- 底层标签页 -->
        <van-tabbar class="tabbar"
            v-model="active"
            @change="onChange">
            <van-tabbar-item icon="wap-home"
                name="home">主页</van-tabbar-item>
            <van-tabbar-item icon="shop"
                name="information">商家</van-tabbar-item>
            <van-tabbar-item icon="thumb-circle"
                name="distribute">下单</van-tabbar-item>
            <van-tabbar-item icon="bars"
                name="order">订单</van-tabbar-item>
            <van-tabbar-item icon="manager"
                name="personalCenter">我的</van-tabbar-item>
        </van-tabbar>

    </div>
</body>


<script>
    new Vue({
        el: "#app",
        data() {
            return {
                active: 'information', // 控制底层标签栏的显示
                tab: '热门', // 控制标签页的显示
                isLoading: false, // 控制下拉刷新状态的显示
                isShowShopQR: false, // 控制商家二维码的展示
                showConfirmPopup1: false,//控制菜单弹出层 
                showConfirmPopup2: false,//控制菜单弹出层 
                shopItemImg: '', // 店家二维码路径
                t: "",
                shopList: shopList,
                swipesList: [], // 轮播图列表
                confirmDeliveryInfo: {}//单个菜单
            }
        },
        methods: {
            //点击信息
            xinxiConfirm(item) {
                this.confirmDeliveryInfo = item
                this.t = this.confirmDeliveryInfo.tupian
                this.showConfirmPopup1 = true
            },
            //东浴三层点击信息
            xinxiConfirm1(item) {
                this.confirmDeliveryInfo = item
                this.t = this.confirmDeliveryInfo.tupian
                this.showConfirmPopup2 = true
            },
            //图片预览
            onclick() {
                vant.ImagePreview(this.t);
            },
            // 下拉刷新功能
            async onRefresh() {
                // 请求订单列表数据
                await this.getShopList()
                setTimeout(() => {
                    // 刷新成功提示
                    this.$toast('刷新成功')
                    // 关闭下拉刷新
                    this.isLoading = false
                }, 1000)
            },
            // 查看商家二维码
            showDetail(item) {
                this.shopItemImg = item.shopImg
                this.isShowShopQR = true
            },
            // Tabbar 跳转其他页面
            onChange(index) {
                if (index === 'home') {
                    location.href = `./home.html?flag=0`
                } else {
                    location.href = `./${index}.html`
                }
            },
            async getShopList() {
                // const result = await axios({ method: 'GET', url: '/user/shop/getShops' })
                // this.shopList = result.data
            }
        },
        async mounted() {
            // await this.getShopList()
        }
    })
</script>

</html>